<script setup lang='ts'>
import { ref } from 'vue'
import { DArrowRight, DArrowLeft } from '@element-plus/icons-vue'
// 左边导航栏
import asideVue from '@/components/nav/aside.vue';
// 面包屑
import Breadcrumb from '@/components/nav/breadcrumb.vue'
// 用户信息
import UserInfo from '@/components/nav/userBar.vue'
// tab切换栏
import TabBar from "@/components/TabBar/TabBar.vue";
const status = ref<boolean>(false)
</script>
<template>
  <el-container>
    <!-- 导航栏 -->
    <div class="el">
      <asideVue :isCollapse="status" />
    </div>
    <el-container>
      <el-header height="70px">
        <el-icon :size="30" @click="() => { status = !status }">
          <component :is="status ? DArrowRight : DArrowLeft" />
        </el-icon>
        <!-- 面包屑 -->
        <div class="Breadcrumb">
          <Breadcrumb />
        </div>
        <!-- 用户信息 -->
        <div class="userinfo">
          <UserInfo />
        </div>
      </el-header>
      <el-main>
        <TabBar />
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<style lang='less' scoped>
.el {
  height: 100vh;
  background-color: #324157;
}

.el-main {}

.el-header {
  display: flex;
  align-items: center;
  background-color: #fff;
  justify-content: space-between;
  width: 100%;
}

.Breadcrumb {
  flex-grow: 1;
}

.userinfo {
  margin-right: 50px;
}
</style>